import { Flex } from "antd"

import { StatusTag } from "@/components/common"
import { useDigital } from "@/hooks"
import { RecordType } from "@/interface/common"
import { useLocale } from "@/locales"

const useColumns = () => {
	const { newFormat } = useLocale()
	const { renderFormat, renderSlash } = useDigital()
	const bankCardNumber = {
		dataIndex: "cardNumber",
		title: newFormat("label.bankCardNumber"),
		align: "center",
		width: 120
	}
	const bankCombin = {
		dataIndex: "bankCombin",
		title: (
			<Flex vertical align="center">
				<div>{newFormat("label.bankName")}</div>
				<div>{newFormat("label.bankBranch")}</div>
			</Flex>
		),
		align: "center",
		width: 160,
		render: (_text: any, record: RecordType) => {
			return (
				<Flex vertical align="center">
					<div>{record.bankName}</div>
					<div>{record.bankAddress}</div>
				</Flex>
			)
		}
	}
	const blacklistStatus = {
		dataIndex: "blacklistStatus",
		title: newFormat("common.components.black_status"),
		align: "center",
		width: 120,
		render: (text: number) => {
			return (
				<StatusTag
					type={text === 1 ? "success" : "error"}
					content={newFormat(text === 1 ? "common.components.oning" : "label.forbidden")}
				/>
			)
		}
	}
	const bindStatus = {
		dataIndex: "bindStatus",
		title: newFormat("common.components.binding_status"),
		align: "center",
		width: 120,
		render: (text: number) => {
			return (
				<StatusTag type={text === 1 ? "success" : "error"} content={newFormat(text === 1 ? "common.binding" : "label.notBind")} />
			)
		}
	}
	const bindNum = {
		dataIndex: "bindNum",
		title: newFormat("label.bindNum"),
		align: "center",
		width: 120
	}
	const memberNameCombin = {
		dataIndex: "memberCombin",
		title: (
			<Flex vertical align="center">
				<div>{newFormat("label.memberAccount")}</div>
				<div>{newFormat("label.memberFullName")}</div>
			</Flex>
		),
		align: "center",
		width: 160,
		render: (_text: any, record: RecordType) => {
			return (
				<Flex vertical align="center">
					<div>{record.userName || "-"}</div>
					<div>{record.realName || "-"}</div>
				</Flex>
			)
		}
	}
	const timesCombin = {
		dataIndex: "timesCombin",
		title: (
			<Flex vertical align="center">
				<div>{newFormat("label.memberWithdrawSucc")}</div>
				<div>{newFormat("label.memberWithdrawFail")}</div>
			</Flex>
		),
		align: "center",
		width: 200,
		render: (_text: any, record: RecordType) => {
			return (
				<Flex vertical align="center">
					<div>{record.withdrawalSuccessNum}</div>
					<div>{record.withdrawalFailNum}</div>
				</Flex>
			)
		}
	}
	const proxyTimesCombin = {
		dataIndex: "proxyTimesCombin",
		title: (
			<Flex vertical align="center">
				<div>{newFormat("label.agentWithdrawSucc")}</div>
				<div>{newFormat("label.agentWithdrawFail")}</div>
			</Flex>
		),
		align: "center",
		width: 200,
		render: (_text: any, record: RecordType) => {
			return (
				<Flex vertical align="center">
					<div>{record.proxyWithdrawalSuccessNum}</div>
					<div>{record.proxyWithdrawalFailNum}</div>
				</Flex>
			)
		}
	}
	const withdrawalTotalAmount = {
		dataIndex: "withdrawalTotalAmount",
		title: newFormat("label.memberWithdrawTotal"),
		align: "center",
		width: 120,
		render: renderFormat
	}
	const proxyWithdrawalTotalAmount = {
		dataIndex: "proxyTotalAmount",
		title: newFormat("label.agentWithdrawTotal"),
		align: "center",
		width: 120,
		render: renderFormat
	}
	const bankCreatedAt = {
		dataIndex: "createdAt",
		title: newFormat("label.newCardAt"),
		align: "center",
		width: 200
	}
	const lastWithdrawalTime = {
		dataIndex: "lastWithdrawalTime",
		title: newFormat("label.lastWithdrawalTime"),
		align: "center",
		width: 200,
		render: renderSlash
	}
	const updatedCombin = {
		dataIndex: "updatedCombin",
		title: (
			<Flex vertical align="center">
				<div>{newFormat("label.bankUpdatedBy")}</div>
				<div>{newFormat("label.bankUpdatedAt")}</div>
			</Flex>
		),
		align: "center",
		width: 200,
		render: (_text: any, record: RecordType) => {
			return (
				<Flex vertical align="center">
					<div>{record.updatedBy || "-"}</div>
					<div>{record.updatedAt || "-"}</div>
				</Flex>
			)
		}
	}
	const cardOwner = {
		dataIndex: "cnName",
		title: newFormat("label.cardOwner"),
		align: "center",
		width: 120,
		render: renderSlash
	}
	const accountWindControl = {
		dataIndex: "accountWindControl",
		title: newFormat("label.risk_level"),
		align: "center",
		width: 120,
		render: renderSlash
	}
	const withdrawalTime = {
		dataIndex: "withdrawalTime",
		title: newFormat("label.withdrawTime"),
		align: "center",
		width: 200,
		render: renderSlash
	}
	const virtualAddress = {
		dataIndex: "virtualAddress",
		title: newFormat("label.virtualAddress"),
		align: "center",
		width: 120,
		render: renderSlash
	}
	const virtualKind = {
		dataIndex: "virtualKind",
		title: newFormat("label.virtualKind"),
		align: "center",
		width: 120,
		render: renderSlash
	}
	const virtualProtocolStr = {
		dataIndex: "virtualProtocolStr",
		title: newFormat("label.virtualProtocol"),
		align: "center",
		width: 120,
		render: renderSlash
	}

	return {
		bankCardNumber,
		bankCombin,
		blacklistStatus,
		bindStatus,
		bindNum,
		memberNameCombin,
		timesCombin,
		proxyTimesCombin,
		withdrawalTotalAmount,
		proxyWithdrawalTotalAmount,
		bankCreatedAt,
		lastWithdrawalTime,
		updatedCombin,
		cardOwner,
		withdrawalTime,
		accountWindControl,
		virtualAddress,
		virtualKind,
		virtualProtocolStr
	}
}
export default useColumns
